<style lang="less" scoped>
    @import './../order/order.less';
</style>

<template>
    <Div class="code">
        <Row class="form">
        	<Form :model="searchForm">
        		<Col class="order_num">
        			<FormItem>
        				<Label>订单号</Label>
        				<Input placeholder="订单号" v-model="searchForm.order_number"></Input>
        			</FormItem>
        		</Col>
	        	<Col class="shop_name">
					<FormItem>
						<Label>门店名称</Label>
						<i-select filterable clearable placeholder="全部" v-model="searchForm.store_id" @on-change="handleChangeStaff">
							<Option v-for="item in stores" :value="item.id" :key="item.id">{{ item.store_name }}</Option>
						</i-select>
					</FormItem>
				</Col>
	      <!-- <Col class="pay">
					<FormItem>
						<Label>店员名称</Label>
						<i-select clearable placeholder="全部" v-model="searchForm.staff_id">
							<Option v-for="item in staffs" :value="item.id" :key="item.id">{{ item.staff_name }}</Option>
						</i-select>
					</FormItem>
				</Col> -->
	        	<Col class="time">
					<FormItem>
						<Label>选择时间</Label>
						<DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" @on-change="handleChangeTimeStart"></DatePicker>
						<span>-</span>
						<DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" @on-change="handleChangeTimeEnd"></DatePicker>
					</FormItem>
				</Col>
	        	<Col class="seach-btn" :xs="2">
					<Button icon="ios-search" @click="handleSearch">
						查询
					</Button>
				</Col>
        	</Form>
        </Row>
		<Row class="card">
			<Col :lg="7" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="money"></i>
					<Div>
						<h3>实收总金额</h3>
						<h1>
							<span>{{ amount }}</span>
						</h1>
					</Div>
				</Card>
			</Col>
			<Col :lg="6" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="order"></i>
					<Div>
						<h3>支付成功笔数</h3>
						<h1>
							<span>{{ count }}笔</span>
						</h1>
					</Div>
				</Card>
			</Col>
			<Col :lg="7" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="num"></i>
					<Div style="width:60%;">
						<p v-for="item in channel" :key="item.amount">
							<span>{{ item.channel }}</span><span class="fr"><span>{{ item.amount }}</span></span>
						</p>
					</Div>
				</Card>
			</Col>
		</Row>
		<Row>
			<Table :columns="columns" :data="orderList"></Table>
			<Page :total="page.total" show-elevator show-total :page-size="page.size" @on-change="handleChangePage" class-name="page"></Page>
		</Row>
		<Modal v-model="modal" title="订单详情" :mask-closable="false">
			<ul>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">订单号：{{ orderNum }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">店员名称：{{ codeName }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付方式：{{ pay }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">应收金额：{{ payMoney }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">商家优惠活动：{{ discount }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付状态：{{ payState }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付流水：{{ payNum }} </li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付时间：{{ payTime }}</li>
				<!-- <li style="padding-bottom:5px;display:inline-block;width:49%;">支付方式：{{ code }}</li> -->
				<li style="padding-bottom:5px;display:inline-block;width:49%;">实收金额：{{ money }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">订单备注：{{ marks }}</li>
			</ul>
			<Div slot="footer"></Div>
		</Modal>
    </Div>
</template>
<script>
	import CountTo from '../count-to/CountTo.vue';
	import { scoreInit, handleScoreSearch, handleScorePage, handleScoreOrder } from '@/api/store'
	import { storesInit, stroeUser } from '@/api/order'

	export default {
	components: {
		CountTo
	},
	name: 'order_code',
	data(){
			return{
				modal: false,
				endVal: 0,
				codeName: '无',
				orderNum: '',
				payNum: '',
				pay: '',
				payTime: '',
				payMoney: '',
				code: '',
				discount: '无',
				money: '',
				payState: '',
				marks: '',
				amount: '',
				count: '',	
				mainStyle:{
					fontSize: 'inherit',
					fontWeight: 'inherit'
				},
				columns:[
					{
						title: "订单号",
						align: 'center',
						key: "order_number"
					},
					{
						title: "门店名称",
						align: 'center',
						key: 'store_name'
					},
					// {
					// 	title: '店员名称',
					// 	align: 'center',
					// 	key: "staff_name"
					// },
					{
						title: '付款金额',
						align: 'center',
						key: 'amount'
					},
					{
						title: '支付方式',
						align: 'center',
						key: "pay_software"
					},
					{
						title: '支付时间',
						align: 'center',
						key: 'pay_at'
					},
					{
						title: '支付状态',
						align: 'center',
						key: 'pay_status'
					},
					{
						title: '操作',
						align: 'center',
						render:(h, params) => {
							return h('Button',{
								props:{
									type: 'text'
								},
								style:{
									color: '#0078ff',
									padding: 0
								},
								on: {
									click: ()=>{
										this.show(params.row.id)
									}
								}
							},"查看")
						}
					}
				],
				orderList:[],
				searchForm: {
					order_number: '',
					store_id: '',
					staff_id: '',
					start: '',
					end: ''
				},
				page: {
					total: 0,
					size: 1
				},
				channel: [],
				stores: [],
				staffs: []
			}
		},
		methods:{
			show(id){
				this.modal = true
				handleScoreOrder(id).then(response => {
					this.orderNum = response.data.data.order_number
					this.payTime = response.data.data.pay_at
					this.payState = response.data.data.pay_status
					this.pay = response.data.data.pay_software
					this.payMoney = response.data.data.amount
					this.money = response.data.data.arrive_mount
					this.payNum = response.data.data.trade_no
					this.marks = response.data.data.remarks
				})
			},
			init() {
				scoreInit().then(response => {
					this.orderList = response.data.data.orders
					this.page.total = response.data.data.total
					this.page.size = response.data.data.size
					this.amount = response.data.data.amount
					this.count = response.data.data.count
					this.channel = response.data.data.channels
				})
				storesInit().then(response => {
					this.stores = response.data.data.stores
				})
			},
			handleSearch() {
				handleScoreSearch(this.searchForm).then(response => {
					this.orderList = response.data.data.orders
					this.page.total = response.data.data.total
				})
			},
			handleChangePage(v) {
				handleScorePage(v, this.searchForm).then(response => {
					this.orderList = response.data.data.orders
					this.page.total = response.data.data.total
				})
			},
			handleChangeStaff(v) {
				if (v !== '') {
					stroeUser(v).then(response => {
						this.staffs = response.data.data.staffs
					})
				}
			},
			handleChangeTimeStart(v) {
				this.searchForm.start = v
			},
			handleChangeTimeEnd(v) {
				this.searchForm.end = v
			}
		},
		created() {
			this.init()
		}
	}
</script>